<template>
	<view class="pages">
		<view class="form">
			<view class="inp">
				<text>头像</text>
				<view>
					<button class="avatar wxbtn" open-type="chooseAvatar" @chooseavatar="changeAvatar">
						<image :src="form.avatar" v-if="form.avatar" style="width: 80rpx;height: 80rpx;margin: 0;"></image>
						<text v-else>头像</text>
					</button>
					 
				</view>

			</view>
			<view class="inp" style="margin-top: 20rpx;">
				<text>昵称</text>
				<view class="">
					<input v-model="form.nickname" type="nickname" class="weui-input" placeholder="点击获取昵称" @change="getNickname" />
				 
				</view>
			</view>
		</view>
		<view class="form">
			<view class="inp" @click="tourl('/pages/my/privacyAgreement?type=4')">
				<text>隐私协议</text>
				<view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</view>

			</view>
		</view>
		<view class="form">
			<view class="inp" @click="show=!show">
				<text>注销账号</text>
				<view class="">
					<u-icon slot="right" name="arrow-right"></u-icon>
					 
				</view>

			</view>

		</view>
		
		<woods-popup-modal :show="show" @signOut="signOut"></woods-popup-modal>
		
		<!-- <view class="footer">
			<view class="btn" @click="up">
				提交
			</view>
		</view> -->
	</view>
</template>

<script>
	import { userInfoAPI,updateuserInfoAPI} from "@/api/user.js"
 	import { uploadtempFile } from "@/utils/upload.js"
	import woodsPopupModal from "./components/woods-popupModal.vue"
	export default {
		components:{
			woodsPopupModal
		},
		data() {
			return {
				form: {
					
				},
				imgArr: [],
				project_id: "",
				id: "",
				show:false
			}
		},
		
		onLoad(option) {
			this.getdata()
			 
		},
		methods: {
			getdata() {
				userInfoAPI().then(res => {
					this.form = res
				})
			},
			signOut(flag){
				this.show=!this.show
				if(flag){
					uni.clearStorage()
					uni.reLaunch({
						url:'/pages/login/login'
					})
				}
				
			},
			changeAvatar(e) {
				console.log(e)
				var temp = e.detail.avatarUrl;
				uploadtempFile(temp).then(res => {
					this.form.avatar = res
					this.up()
				})
			},
			getNickname(e) {
				console.log(e.detail.value)
				this.form.nickname = e.detail.value
				this.up()
			},
			up() {
				updateuserInfoAPI(this.form).then(res => {
					uni.showToast({
						title: '编辑成功',
						 
					})

				}) 
			}, 
		 }
	}
</script>

<style lang="scss" scoped>
	.pages {
		padding: 30rpx;
		background-color: #F7F8FA;
		min-height: 100vh;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #efefef;

		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 80px;
			height: 80rpx;
			border-radius: 50%;
		}

		text {
			color: #666;
			font-size: 20rpx;
		}
	}

	.form {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 20rpx;

		.inp {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 0;

			>text {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				width: 200rpx;
			}

			view {

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 0 10rpx;
				}

				input {
					text-align: right;
				}
			}

		}
	}


	.footer {
		position: fixed;
		width: 100%;
		height: 96px;
		bottom: 0;
		left: 0;
		background: rgba(251, 252, 255, 0.90);
		box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.02);
		backdrop-filter: blur(16px);
		display: flex;
		align-items: center;
		justify-content: center;

		view {
			width: 620rpx;
			height: 90rpx;
			background-color: #dadada;
			border-radius: 16px;
			text-align: center;
			line-height: 90rpx;
			color: #fff;
		}

		.btn {
			background: linear-gradient(98deg, #ff5e18, #ff1818 100%);
		}
	}
</style>